React Bootstrap Profile |
您所在的位置：网站首页 › profile form error › React Bootstrap Profile |
React Bootstrap Profile
|
Profiles
React Bootstrap 5 Profile page & profile cards
Responsive profile pages and cards built with React Bootstrap 5. User profile card, profile picture, followers, avatars, comments, social stats, edit profile form.
Basic profile card
A simple profile card template with chat option, square avatar and stat counters. 
Danny McLoan
Senior Journalist Articles 41 Followers 976 Rating 8.5 Show code JSX import React from 'react'; import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardTitle, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn } from 'mdb-react-ui-kit'; export default function Basic() { return ( Danny McLoan Senior JournalistArticles 41 Followers 976 Rating 8.5 Chat Follow ); } eCommerce profile cardA eCommerce profile card with a star rating number of comments / testimonial reviews and a "Book now" call to action button. The CTA in this case could be integrated with a calendar schedule. Exquisite hand henna tattoo3 hrs $90 
@sheisme 52 comments Show code JSX import React from 'react'; import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn, MDBTypography, MDBIcon } from 'mdb-react-ui-kit'; export default function ECommerce() { return ( Exquisite hand henna tattoo3 hrs $90 @sheisme + Follow See profile 52 comments Book now ); } User profile page templateA full user profile layout, with a circle profile picture in the header, projects section with social icons, a detailed address section and experience cards using progress bars to indicate skill level. 
John Smith
Full Stack Developer Bay Area, San Francisco, CA https://mdbootstrap.com mdbootstrap @mdbootstrap mdbootstrap mdbootstrap Full Name Johnatan Smith Phone (097) 234-5678 Mobile (098) 765-4321 Address Bay Area, San Francisco, CA assigment Project Status Web Design Website Markup One Page Mobile Template Backend API assigment Project Status Web Design Website Markup One Page Mobile Template Backend API Show code JSX import React from 'react'; import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn, MDBBreadcrumb, MDBBreadcrumbItem, MDBProgress, MDBProgressBar, MDBIcon, MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit'; export default function ProfilePage() { return ( Home User User ProfileFull Stack Developer Bay Area, San Francisco, CA Follow Message https://mdbootstrap.com mdbootstrap @mdbootstrap mdbootstrap mdbootstrap Full Name Johnatan Smith Email [email protected] Phone (097) 234-5678 Mobile (098) 765-4321 Address Bay Area, San Francisco, CA assigment Project Status Web Design Website Markup One Page Mobile Template Backend API assigment Project Status Web Design Website Markup One Page Mobile Template Backend API ); } Project cards with attending usersThe list of attendance in this example is indicated by profile pictures of users that joined the event. Program Title| Created by MDBootstrap on 11 April , 2021 settings program link program link | 
Company Culture
| Public | Updated by MDBootstrap on 11 April , 2021 settings program link program link |
Show code
JSX
import React from 'react';
import {
MDBCol,
MDBContainer,
MDBRow,
MDBCard,
MDBCardText,
MDBCardBody,
MDBCardImage,
MDBBtn,
MDBTypography,
MDBIcon
} from 'mdb-react-ui-kit';
export default function AttendingUsers() {
return (
Program Title
| Created by MDBootstrap on 11 April , 2021
settings
program link
program link |
Company Culture
| Public | Updated by MDBootstrap on 11 April , 2021
settings
program link
program link |
);
}
Personal profile with edit icon
Responsive profile card design with a clickable update option for the user. Check out the inputs documentation, to integrate & make this template interactive. 
Marie Horwitz
Web Designer Information Email Phone123 456 789 Projects RecentLorem ipsum Most ViewedDolor sit amet Show code JSX CSS import React from 'react'; import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBTypography, MDBIcon } from 'mdb-react-ui-kit'; export default function PersonalProfile() { return ( Marie Horwitz Web Designer Information Email [email protected] Phone 123 456 789 Information Email [email protected] Phone 123 456 789 ); } .gradient-custom { /* fallback for old browsers */ background: #f6d365; /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1)) } Edit button on profile pageAn elegant profile page layout, with an edit button, about section and a photo gallery.
Andy Horwitz
New York 253 Photos 1026 Followers 478 Following About Web Developer Lives in New York Photographer Recent photos Show all .webp)
.webp)
.webp)
.webp)
Show code
JSX
CSS
import React from 'react';
import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn, MDBTypography } from 'mdb-react-ui-kit';
export default function EditButton() {
return (
Edit profile
Andy Horwitz
New York
253
Photos
1026
Followers
478
Following
About Web Developer Lives in New York Photographer Recent photos Show all ); } .gradient-custom-2 { /* fallback for old browsers */ background: #fbc2eb; /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1)) } Profile card with statisticsA light design for any profile card, with social buttons and basic stats. 
Julie L. Arsenault
@Programmer | mdbootstrap.com 8471 Wallets Balance 8512 Income amounts 4751 Total Transactions Show code JSX import React from 'react'; import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn, MDBTypography, MDBIcon } from 'mdb-react-ui-kit'; export default function ProfileStatistics() { return ( Julie L. Arsenault @Programmer | mdbootstrap.com Message now 8471 Wallets Balance 8512 Followers 4751 Total Transactions ); } Related resources Carousel Cards Colors Progress Icons Typography Buttons |
【本文地址】